<template>
	<view class="login">
		<image src="@/static/img/logo.png" mode="" class="logo"></image>
		<form>
			<input type="text" placeholder="请输入名称" class="ipt" v-model="name" placeholder-style="font-size:24rpx"/>
			<view class="model">
				<uni-data-picker placeholder="请选择板块" popup-title="请选择板块" :localdata="dataTree" v-model="classes"
					@change="onchange" @nodeclick="onnodeclick" @popupopened="onpopupopened"
					@popupclosed="onpopupclosed" style="width: 100%;">
				</uni-data-picker>

			</view>
		</form>
		<button form-type="submit" @click="formSubmit">登录</button>
	</view>
</template>

<script>
	import loginVue from './login.vue';
	export default {
		data() {
			return {
				name: '',
				model: '',

				multiIndex: ['0-0'],
				classes: '',
				dataTree: [{
						text: "淄博",
						value: "1-0",
						children: [{
							text: "张店",
							value: "1-1",
						}, {
							text: "桓台",
							value: "1-2",
						}]
					},
					{
						text: "潍坊",
						value: "2-0",
						children: [{
								text: "昌邑",
								value: "2-1",
							},
							{
								text: "寒亭",
								value: "2-2"
							},
							{
								text: "坊子",
								value: "2-3"
							},
							{
								text: "潍城",
								value: "2-4"
							},
							{
								text: "寿光",
								value: "2-5"
							},
							{
								text: "奎文",
								value: "2-6"
							}
						]
					},
					{
						text: "东营",
						value: "3-0",
						// disable: true,
						children: [{
								text: "东营东",
								value: "3-1"
							},
							{
								text: "东营西",
								value: "3-2"
							},
							{
								text: "利津",
								value: "3-3"
							},
							{
								text: "垦利",
								value: "3-4"
							},
							{
								text: "河口",
								value: "3-5"
							}
						]
					},
					{
						text: "德州",
						value: "4-0",
						// disable: true,
						children: [{
								text: "庆云",
								value: "4-1"
							},
							{
								text: "乐陵",
								value: "4-2"
							}
						]
					},
					{
						text: "滨州",
						value: "5-0",
						// disable: true,
						children: [{
								text: "滨城",
								value: "5-1"
							},
							{
								text: "沾化",
								value: "5-2"
							},
							{
								text: "无棣",
								value: "5-3"
							},
							{
								text: "惠民",
								value: "5-4"
							},
							{
								text: "博兴",
								value: "5-5"
							},
							{
								text: "阳信",
								value: "5-6"
							}
						]
					},
					{
						text: "沧州",
						value: "6-0",
						// disable: true,
						children: [{
								text: "全市",
								value: "6-1"
							},

						]
					},
					{
						text: "青岛",
						value: "7-0",
						// disable: true,
						children: [{
								text: "即墨",
								value: "7-1"
							},
							{
								text: "胶州",
								value: "7-2"
							},
						]
					}
				]
			}
		},
		onShareAppMessage() {
			return {
				title: '登录',
				path: '/pages/login',
				imageUrl: '图片',
			};
		},
		onLoad() {
			this.name = uni.getStorageSync('name');
			this.model = uni.getStorageSync('model');
			this.classes = uni.getStorageSync('classes');
		},
		methods: {
			onnodeclick(e) {
				console.log(e);
			},
			onpopupopened(e) {
				// console.log('popupopened');
			},
			onpopupclosed(e) {
				// console.log('popupclosed');
			},
			onchange(e) {
				this.model = e.detail.value[0].text
				this.classes = e.detail.value[1].value
			},
			formSubmit() {
				if (this.name == '') {
					uni.showToast({
						title: '请输入名称',
						icon: 'none'
					})
					return
				}
				if (this.classes == '') {
					uni.showToast({
						title: '请选择板块',
						icon: 'none'
					})
					return
				}

				uni.setStorageSync('name', this.name);
				uni.setStorageSync('model', this.model);
				uni.setStorageSync('classes', this.classes);
				uni.navigateTo({
					url: '/pages/index/index'
				})
			},
			selectModel() {

			},

		}


	}
</script>

<style lang="less">
	.input-value-border {
		border: none !important;
	}

	.picker {
		padding: 10px;
		background-color: #fff;
		text-align: center;
	}

	.title {
		font-size: 14px;
		font-weight: bold;
		margin: 20px 0 5px 0;
	}


	.inputTetxt {
		color: #868686;
	}

	.model {
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1rpx solid #DDDDDD;
		padding: 36rpx 30rpx;
		margin-top: 10rpx 50rpx;
		width: 100%;
	}

	.icon {
		position: relative;
		font-size: 28px;
		color: #606266;
	}

	.icon:before {
		content: "\e600";
	}

	button {
		width: 400rpx;
		height: 80rpx;
		background: #33CDDF !important;
		border-radius: 10rpx;
		margin-top: 174rpx;
		color: #fff !important;
	}


	.login {
		padding: 50rpx;
	}

	.logo {
		margin: 290rpx auto 150rpx;
		width: 132rpx;
		height: 132rpx;
		display: flex;
		justify-content: center;
		border-radius: 100%;
	}

	.ipt {
		border-bottom: 1rpx solid #DDDDDD;
		padding: 36rpx 50rpx;
		margin-top: 10rpx 50rpx;
	}
</style>